.heter-normal{
    @include size;
    &::before{
        @include beforesize;
    background:
    linear-gradient($normal-line, $normal-line) no-repeat left top / 20px 2px border-box,
    linear-gradient($normal-line, $normal-line) no-repeat left top / 2px 20px border-box,
    linear-gradient($normal-line, $normal-line) no-repeat right top / 20px 2px border-box,
    linear-gradient($normal-line, $normal-line) no-repeat right top / 2px 20px border-box,
    linear-gradient($normal-line, $normal-line) no-repeat right bottom / 20px 2px border-box,
    linear-gradient($normal-line, $normal-line) no-repeat right bottom / 2px 20px border-box,
    linear-gradient($normal-line, $normal-line) no-repeat left bottom / 20px 2px border-box,
    linear-gradient($normal-line, $normal-line) no-repeat left bottom / 2px 20px border-box,
    linear-gradient($normal-bg,$normal-bg 1px,transparent) no-repeat left top / 100% 10px border-box,
    linear-gradient(to right,$normal-bg,$normal-bg 1px,transparent) no-repeat left top 10px / 10px calc(100% - 20px) border-box,
    linear-gradient(to left,$normal-bg,$normal-bg 1px,transparent) no-repeat right top 10px / 10px calc(100% - 20px) border-box,
    linear-gradient(to top,$normal-bg,$normal-bg 1px,transparent) no-repeat left bottom / 100% 10px border-box;
   }
    &.heter-normal-respire{
    &::after{
        @include respire-base;
        background:
        linear-gradient($warning-line, $warning-line) no-repeat left top / 20px 2px border-box,
        linear-gradient($warning-line, $warning-line) no-repeat left top / 2px 20px border-box,
        linear-gradient($warning-line, $warning-line) no-repeat right top / 20px 2px border-box,
        linear-gradient($warning-line, $warning-line) no-repeat right top / 2px 20px border-box,
        linear-gradient($warning-line, $warning-line) no-repeat right bottom / 20px 2px border-box,
        linear-gradient($warning-line, $warning-line) no-repeat right bottom / 2px 20px border-box,
        linear-gradient($warning-line, $warning-line) no-repeat left bottom / 20px 2px border-box,
        linear-gradient($warning-line, $warning-line) no-repeat left bottom / 2px 20px border-box,
        linear-gradient($warning-bg,$warning-bg 1px,transparent) no-repeat left top / 100% 10px border-box,
        linear-gradient(to right,$warning-bg,$warning-bg 1px,transparent) no-repeat left top 10px / 10px calc(100% - 20px) border-box,
        linear-gradient(to left,$warning-bg,$warning-bg 1px,transparent) no-repeat right top 10px / 10px calc(100% - 20px) border-box,
        linear-gradient(to top,$warning-bg,$warning-bg 1px,transparent) no-repeat left bottom / 100% 10px border-box;
    }
}
}